// import {exeControlCommand} from '@/api/setting'
// import {CCard} from '@/components/card'
// import {IconImg} from '@/components/images'
import {View, Text, Switch, RootPortal, Button, Image} from "@tarojs/components"
import Taro from "@tarojs/taro"
import {useState} from "react"
import {AtButton, AtSegmentedControl, AtSwitch, AtInputNumber} from "taro-ui"
// import { AtForm, AtSwitch } from 'taro-ui'
// import btnControll from './btnControlls'
import "./hand.scss"
import {editManualSetDataApi} from "@/api/additionConf.ts"

export const Hand: React.FC<{
	manualSetDataId: number
	manualCollectRate: number
	setManualCollectRate: Function
	getCurrentConfFunc: Function
}> = ({
	manualSetDataId,
	manualCollectRate,
	setManualCollectRate,
	getCurrentConfFunc
}): JSX.Element => {
	/* 组件类型 */
	// const [compType, setCompType] = useState("two")

	// /* 手动单组件状态标识 */
	// const [isOneOpen, setIsOneOpen] = useState(false)

	// /* 手动双组件联动状态的切换标识 */
	// const [isTwoOpen, setIsTwoOpen] = useState(false)

	// 执行动画函数
	const executeAnimationFunc = () => {
		Taro.showLoading({
			title: "执行中",
			mask: true
		})
	}

	// 停止执行动画函数
	const stopExecuteAnimationFunc = () => {
		setTimeout(function () {
			Taro.hideLoading()
		}, 2000)
	}

	// 更改单组件状态的函数
	// const switchOneChange = () => {
	// 	if (isOneOpen) {
	// 		Taro.showModal({
	// 			title: "提示",
	// 			content: `确定把手动模式空调控制关闭吗？`,
	// 			success: function (res) {
	// 				if (res.confirm) {
	// 					console.log("用户点击确定")
	// 					executeAnimationFunc()
	// 					setIsOneOpen(!isOneOpen)
	// 					stopExecuteAnimationFunc()
	// 				} else if (res.cancel) {
	// 					console.log("用户点击取消")
	// 					setCompType("")
	// 					setCompType("one")
	// 				}
	// 			}
	// 		})
	// 	} else {
	// 		Taro.showModal({
	// 			title: "提示",
	// 			content: `确定把手动模式空调控制开启吗？`,
	// 			success: function (res) {
	// 				if (res.confirm) {
	// 					setIsOneOpen(!isOneOpen)
	// 					console.log("用户点击确定")
	// 				} else if (res.cancel) {
	// 					console.log("用户点击取消")
	// 					setCompType("")
	// 					setCompType("one")
	// 					// setIsOneOpen(!isOneOpen)
	// 					// setIsOneOpen(!isOneOpen)
	// 				}
	// 			}
	// 		})
	// 	}
	// }

	// 更改手动双组件联动控制状态的函数
	// const switchTwoChange = () => {
	// 	if (isTwoOpen) {
	// 		Taro.showModal({
	// 			title: "提示",
	// 			content: `确定把手动模式从雨水控制切换到污水控制吗？`,
	// 			success: function (res) {
	// 				if (res.confirm) {
	// 					console.log("用户点击确定")
	// 					executeAnimationFunc()
	// 					setIsTwoOpen(!isTwoOpen)
	// 					stopExecuteAnimationFunc()
	// 				} else if (res.cancel) {
	// 					console.log("用户点击取消")
	// 					setCompType("")
	// 					setCompType("two")
	// 				}
	// 			}
	// 		})
	// 	} else {
	// 		Taro.showModal({
	// 			title: "提示",
	// 			content: `确定把手动模式从污水控制切换到雨水控制吗？`,
	// 			success: function (res) {
	// 				if (res.confirm) {
	// 					console.log("用户点击确定")
	// 					executeAnimationFunc()
	// 					setIsTwoOpen(!isTwoOpen)
	// 					stopExecuteAnimationFunc()
	// 				} else if (res.cancel) {
	// 					console.log("用户点击取消")
	// 					setCompType("")
	// 					setCompType("two")
	// 				}
	// 			}
	// 		})
	// 	}

	// 	// setIsTwoOpen(!isTwoOpen)
	// }

	/* 修改间隔时间的change事件 */
	const editCollectRateChange = (e: any) => {
		setManualCollectRate(e)
	}

	/* 保存手动配置的函数 */
	const saveManualConfClick = () => {
		if (manualCollectRate == 0) {
			Taro.showModal({
				title: "提示",
				content: `间隔时间不能为 0`,
				success: function (res) {
					if (res.confirm) {
						console.log("用户点击确定")
					} else if (res.cancel) {
						console.log("用户点击取消")
					}
				}
			})
			return
		}

		// 验证成功后的保存提示
		Taro.showModal({
			title: "提示",
			content: `确定要保存手动模式下的配置吗?`,
			success: function (res) {
				if (res.confirm) {
					console.log("用户点击确定")
					Taro.showLoading({
						title: "保存中",
						mask: true
					})
					manualSaveConfFunc()
				} else if (res.cancel) {
					console.log("用户点击取消")
				}
			}
		})
	}

	const manualSaveConfFunc = async () => {
		await editManualSetDataApi({
			setDataId: manualSetDataId,
			autoCollectRate: manualCollectRate
		}).then(() => {
			Taro.showToast({
				title: "保存成功",
				icon: "success",
				duration: 2000
			})
		})
		getCurrentConfFunc()
		Taro.hideLoading()
	}
	return (
		<View>
			<View className="form_box">
				<View className="form_item">
					<View className="label">
						<Text className="text">间隔时间：</Text>
					</View>
					<AtInputNumber
						type="number"
						min={0}
						max={1000}
						step={1}
						value={manualCollectRate}
						onChange={e => {
							editCollectRateChange(e)
						}}
					/>

					<Text className="unit">分钟</Text>
				</View>
			</View>
			<AtButton className="save_btn" type="primary" onClick={saveManualConfClick}>
				保存手动配置
			</AtButton>
			{/* 单个控制组件 */}
			{/* {compType == "one" ? (
				<View>
					<View className="card">
						<View className="title">
							<Image
								className="img"
								src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/x_huanjing.png"
							></Image>
							<Text className="text ">空调控制</Text>
						</View>
						<View className="data">
							<Switch
								checked={isOneOpen}
								onChange={switchOneChange}
								className="statusSwitch"
							/>
						</View>
					</View>
				</View>
			) : null} */}
			{/* 两个联动控制组件 */}
			{/* {compType == "two" ? (
				<View>
					<View>
						<View className="card">
							<View className="title">
								<Image
									className="img"
									src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/x_huanjing.png"
								></Image>
								<Text className="text">雨水控制</Text>
							</View>
							<View className="data">
								<Switch
									className="data_switch statusSwitch"
									checked={isTwoOpen}
									onChange={switchTwoChange}
									style="width: 40px;height: 15px;"
									color="#258ef4"
								/>
							</View>
						</View>
					</View>
					<View>
						<View className="card">
							<View className="title">
								<Image
									className="img"
									src="https://d.lohand.com:1112/images/ConstantBlueCloud/WEB/x_huanjing.png"
								></Image>
								<Text className="text">污水控制</Text>
							</View>
							<View className="data">
								<Switch
									className="data_switch statusSwitch"
									checked={!isTwoOpen}
									onChange={switchTwoChange}
									style="width: 40px;height: 15px;"
									color="#258ef4"
								/>
							</View>
						</View>
					</View>
				</View>
			) : null} */}
		</View>
	)
}
